<template>
  <div>
    <div
      class="step"
      v-for="(i, index) in modelData"
      :style="{
        marginLeft: `${modelData.length * 70 - 70 * index}px`,
        textAlign: 'center'
      }"
      style="position: relative"
    >
      <a-input v-model="modelData[index]" />
      <a-space style="position: absolute; right: -60px; top: 10px">
        <a-button
          type="primary"
          shape="circle"
          size="mini"
          @click="plus(index)"
        >
          <icon-plus />
        </a-button>
        <a-button
          v-if="index !== modelData.length - 1"
          type="primary"
          shape="circle"
          size="mini"
          @click="minus(index)"
        >
          <icon-minus />
        </a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  defineProps<{
    data?: any;
    values?: any;
    isSub?: boolean;
    review?: boolean;
  }>(),
  {
    isSub: false,
    review: false
  }
);
const emits = defineEmits(['update:values', 'update:data']);
const modelData = useVModel(props, 'data', emits);

const plus = (index: number) => {
  console.log(index);

  modelData.value.splice(index, 0, '');
};
const minus = (index: number) => {
  modelData.value.splice(0, index + 1);
};
</script>
<style scoped lang="less">
.step {
  // background: #3296fa;
  padding: 0 5px;
  display: flex;
  height: 60px;
  width: 150px;
  :deep(.arco-input-wrapper) {
    background: #51a3f5;
    border-color: #3296fa;
    .arco-input {
      text-align: center;
      font-size: 26px;
    }
  }
  font-weight: 700;
  font-size: 32px;
}
</style>
